<template>
	<div class="notice-content">
		<div class="notice-warp">
			<div class="breadcrumb">
				<i class="breadcrumb-icon"></i>
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
					<el-breadcrumb-item><a>成员馆动态</a></el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<!-- 	<div class="notice-types">
				<div class="types-item">类型</div>
				<div class="types-item" :class="{'type-active': activeTag == item.recId}" v-for="item in tags"
					@click="tagClick(item)">{{item.tagName}}
				</div>
			</div> -->
			<div class="notice-list">
				<div class="list" v-if="articleList.length != 0">
					<div class="item" v-for="item in articleList" @click="goDetails(item.articleId)">
						<div class="item-img">
							<el-image style="width: 100%; height: 100%" :src="item.titleImage" fit="cover">
								<div slot="error" class="image-slot">
									<img src="../assets/img/no_img.png" alt="" />
								</div>
							</el-image>
						</div>
						<div class="item-cont">
							<div class="item-title">{{item.articleTitle}}</div>
							<div class="item-intro">{{item.summary}}</div>
							<div class="item-subheader">
								<div class="item-types">
									<div class="item-type">
										<i class="label-icon"></i>
										<span>{{item.tagName}}</span>
									</div>
									<div class="item-type">
										<i class="view-icon"></i>
										<span>{{item.articleHit}}</span>
									</div>
								</div>
								<div class="item-time">{{item.pubDate}}</div>
							</div>
						</div>
					</div>
					<div class="page-cont">
						<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
							:total="total" @current-change="pageNumChange">
						</el-pagination>
					</div>
				</div>
				<div class="list" v-else>
					<el-empty description="暂无公告"></el-empty>
				</div>
				<div class="top">
					<div class="top-label">热门公告</div>
					<div class="top-list" v-if="topList.length != 0">
						<div class="top-item" v-for="item in topList" @click="goDetails(item.articleId)">
							<div class="top-title">{{item.articleTitle}}</div>
							<div class="item-types">
								<div class="item-type">
									<i class="label-icon"></i>
									<span>{{item.tagName}}</span>
								</div>
								<div class="item-type">
									<i class="view-icon"></i>
									<span>{{item.articleHit}}</span>
								</div>
							</div>
						</div>
					</div>

					<div class="top-list" v-else>
						<el-empty description="暂无热门公告"></el-empty>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getArticleTagApi,
		getArticleListApi,
	} from '@/api/Article'
	import {
		getMemberNewApi
	} from '@/api/home'
	export default {
		data() {
			return {
				articleId: 2356,
				params: {},
				searchStr: '',
				articleList: [],
				tags: [],
				activeTag: '',
				pageNum: 1,
				pageSize: 10,
				total: 0,
				topList: []
			}
		},
		created() {
			this.getArticleList()
			this.getTop()
		},
		methods: {
			goDetails(id) {
				this.$router.push({
					path: '/TrendsDetails',
					query: {
						// type: this.articleId,
						id: id
					}
				})
			},
			pageNumChange(index) {
				this.pageNum = index
				this.getArticleList()
			},
			getTop() {
				getMemberNewApi({
					// menuid: this.articleId,
					tagId: '',
					pageNum: 1,
					pageSize: 5,
					orderby: '热门'
				}).then(res => {
					this.topList = res.rows
				})


			},
			tagClick(item) {
				this.activeTag = item.recId
				this.pageNum = 1
				this.getArticleList()
			},
			getArticleTag() {
				getArticleTagApi({
					menuid: this.articleId
				}).then(res => {
					let list = res.data,
						obj = {
							"recId": '',
							"tagName": "全部",
						}
					list.unshift(obj)
					this.tags = list
				})
			},
			getArticleList() {
				getMemberNewApi({
					// menuid: this.articleId,
					// tagId: this.activeTag,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					this.articleList = res.rows
					this.total = res.total
				})
			}
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.notice-content {
		background-color: #F7F7F7;

		.notice-warp {
			width: @contWidth;
			margin: 0 auto;
		}

		.breadcrumb {
			height: 42px;
			display: flex;
			align-items: center;
		}

		.breadcrumb-icon {
			width: 20px;
			height: 20px;
			margin-right: 8px;
			background: url(../assets/img/crumb_icon.png);
			background-size: 100% 100%;
		}

		.is-link {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.notice-types {
			display: flex;
			align-items: center;
			padding: 20px 26px;
			background: #fff;
			margin-bottom: 26px;
		}

		.types-item {
			margin-right: 50px;
			cursor: pointer;
			color: #999;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.type-active {
			padding: 0 14px;
			height: 34px;
			border-radius: 17px;
			background: #2360FE;
			line-height: 34px;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.notice-list {
			display: flex;
			min-height: calc(100vh - 262px);
		}

		.list {
			width: 960px;
			margin-right: 20px;
			background-color: #fff;
			padding: 20px 26px;

			.item {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				margin-bottom: 20px;
				padding-bottom: 20px;
				cursor: pointer;
			}

			.item-img {
				width: 213px;
				height: 144px;
				background-color: bisque;
				margin-right: 20px;
			}

			.item-cont {
				// flex: 1;
				width: 674px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.item-title {
				font-size: 18px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 20px;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.item-intro {
				font-size: 12px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #666666;
				line-height: 17px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-bottom: 30px;
			}

			.item-subheader {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 17px;

			}


		}

		.page-cont {
			padding: 38px 0 46px;
			display: flex;
			justify-content: center;
		}

		.item-types {
			display: flex;
		}

		.item-type {
			margin-right: 32px;
			display: flex;
			align-items: center;
			font-size: 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 17px;
		}

		.label-icon {
			display: block;
			width: 16px;
			height: 16px;
			background: url(../assets/img/type_icon.png)no-repeat;
			background-size: 100% 100%;
			margin-right: 6px;
		}

		.view-icon {
			display: block;
			width: 16px;
			height: 16px;
			background: url(../assets/img/view_icon.png)no-repeat;
			background-size: 100% 100%;
			margin-right: 6px;
		}

		.top {
			padding: 0 22px;
			width: 300px;
			background-color: #fff;
		}

		.top-label {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 60px;
		}

		.top-item {
			margin-bottom: 16px;
			border-bottom: 1px solid #eee;
			cursor: pointer;
			padding-bottom: 16px;
		}

		.top-title {
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 16px;
		}

		.top-types {
			height: 46px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
</style>